<template>
  <div id="center">
    <div id="map" class="map">
    </div>
  </div>
</template>

<script>

  import AMapLoader from '@amap/amap-jsapi-loader';
  import start from "@/assets/map/start.png";
  import end from "@/assets/map/end.png";
  import build from "@/assets/map/build.png";
  import camera from "@/assets/map/camera.png";

  export default {
    data() {
      return {
        // 百度地图实例
        map:null
      }
    },
    mounted() {
      this.initMap();
    },
    methods: {
      // 加载项目地图数据
      initMap() {
        // this.initBaiduMap();
        const _this = this;
        this.initAMap(_this);
      },
      initBaiduMap() {
        this.map = null;
        const self = this;
        // 创建地图实例
        self.map = new BMap.Map("map");
        // this.setBasicsProperty(null);
        self.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        self.map.addControl(new BMap.MapTypeControl({
          mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
        let navigationControl = new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          type: BMAP_NAVIGATION_CONTROL_SMALL
        });
        self.map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        self.map.enableScrollWheelZoom(true);
        self.map.addControl(navigationControl);
        // this.map.setMapType(BMAP_HYBRID_MAP);
        // this.map.enableScrollWheelZoom();
        let mapStyle={
          style:"bc5825428dc292cfc699860fa6de10c5"
        };
        let mapStyle1={
          style:"midnight"
        };
        self.map.setMapStyle(mapStyle1);
        // self.map.setMapStyleV2(mapStyle1);
      },
      initAMap(_this) {
        AMapLoader.load({
          key: "b2552a29e43be339e640a19479b89800", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          // plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'],  // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          _this.map = new AMap.Map("map", {
            // 设置地图容器id
            // pitch: 50,
            // defaultType: 1,
            // mapStyle: 'amap://styles/f2c674a5b991632b34b0ff6921faed3c', //设置地图的显示样式
            mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
            // terrain: true,
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [105.605592,38.825372], // 初始化地图中心点位置
          });
          _this.map.plugin(['AMap.MapType','AMap.Scale'], function () { //添加地图类型切换插件
            //地图类型切换
            let type= new AMap.MapType({
              defaultType: 0,
              visible: false,
              showRoad: true
            });
            // let mapType = new AMap.MapType({ defaultType: 0}); //0 标准地图。1 卫星地图
            _this.map.addControl(type);
            let lines = [
              [105.666875,38.857862],
              [105.651211,38.859566],
              [105.637392,38.863643],
              [105.634131,38.857695],
              [105.625333,38.855924],
              [105.598468,38.854921],
              [105.566453,38.853785],
              [105.542335,38.851846],
              [105.51856,38.837407],
              [105.513324,38.823433],
              [105.513324,38.823433],
              [105.505685,38.804239],
              [105.496244,38.798219],
              [105.49015,38.794138],
              [105.477533,38.786645]
            ];
            let bezierCurve = new AMap.BezierCurve({
              path: lines,
              strokeWeight: 5, // 线条宽度
              strokeColor: '#fff', // 线条颜色
              isOutline: true,	// 是否描边
              outlineColor: 'green', // 描边颜色
              borderWeight: 3, // 描边宽度
              lineJoin: 'round'
            });
            _this.map.add(bezierCurve);

            // 创建 AMap.Icon 实例：
            let startIcon = new AMap.Icon({
              size: new AMap.Size(128, 128),    // 图标尺寸
              image: start,  // Icon的图像
              imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
              // imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
            });

            let startMarker = new AMap.Marker({
              position: new AMap.LngLat(105.666875,38.857862),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              icon: start,
              title: '起点',
              offset: new AMap.Pixel(-20, -30)
            });
            _this.map.add(startMarker);

            let endMarker = new AMap.Marker({
              position: new AMap.LngLat(105.477533,38.786645),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              icon: end,
              title: '终点',
              offset: new AMap.Pixel(-20, -30)
            });
            _this.map.add(endMarker);

            // 创建一个 Marker 实例：
            // let marker1 = new AMap.Marker({
            //   position: new AMap.LngLat(105.633831,38.860569),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //   icon: build,
            //   title: '第一标段'
            // });
            // _this.map.add(marker1);
            //
            // let marker2 = new AMap.Marker({
            //   position: new AMap.LngLat(105.491314,38.798091),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //   icon: build,
            //   title: '第二标段'
            // });
            // _this.map.add(marker2);

            // let marker3 = new AMap.Marker({
            //   position: new AMap.LngLat(105.498314,38.799091),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //   // icon: camera,
            //   // offset: new AMap.Pixel(-20, -30),
            //   title: '第三标段'
            // });
            // marker3.setLabel({
            //   offset: new AMap.Pixel(0, 0),
            //   content: "第三标段"
            // });
            // _this.map.add(marker3);

            // let marker4 = new AMap.Marker({
            //   position: new AMap.LngLat(105.498314,38.799091),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //   title: '第二标段'
            // });
            // _this.map.add(marker4);

          });
        }).catch((e) => {
            console.log(e);
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  #center {
    padding: 5px 5px 5px 5px;
    height: 100%;
    width: 100%;
  }
  .map {
    width: 99.9%;
    height: 99.9%;
  }
  ::v-deep .amap-logo {
    display: none !important;
  }
  ::v-deep .amap-copyright {
    display: none !important;
  }
  ::v-deep .BMap_cpyCtrl {
    display: none;
  }
  ::v-deep .anchorBL {
    display: none !important;
  }
</style>
